const { defineConfig } = require('@vue/cli-service')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = defineConfig({
  publicPath: '/',
  assetsDir: 'assets',
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1890ff',
            'link-color': '#1890ff',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['cpp', 'java', 'python']
      }),
      new webpack.DefinePlugin({
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(true)
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'src/protos/',
            to: 'protos/',
            globOptions: {
              ignore: ['**/*.proto'] // 忽略proto文件
            },
            noErrorOnMissing: true
          }
        ]
      })
    ],
    module: {
      rules: [
        {
          test: /\.proto$/,
          loader: 'ignore-loader'
        },
        {
          test: /\.md$/,
          loader: 'raw-loader'
        },
        {
          test: /_pb\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.vue', '.json', '.pb.js']
    }
  },
  devServer: {
    static: {
      serveIndex: true,
      staticOptions: {
        extensions: ['json'],
        setHeaders: (res, path) => {
          if (path.endsWith('.json')) {
            res.setHeader('Content-Type', 'application/json');
          }
        }
      }
    }
  }
})
